<template>
  <div class="unit" :class="(status || isfirst) && data.name ? 'statu' : ''">
    <!-- 编辑状态 -->
    <template v-if="status || isfirst || !data.name">
      <a-form
        :form="form"
        class="form"
        layout="horizontal"
        labelAlign="left"
        @submit="onSave"
      >
        <div class="dlex2-div">
          <div style="flex:1">
            <a-form-item label="姓名">
              <a-input
                style="width: 300px"
                size="large"
                :disabled="true"
                placeholder="请输入姓名"
                v-decorator="[
                  'name',
                  {
                    rules: [{ required: true, message: '请输入姓名' }],
                    initialValue: data.name,
                  },
                ]"
              />
            </a-form-item>
            <a-form-item label="性别">
              <a-radio-group
                button-style="solid"
                v-decorator="[
                  'sex',
                  {
                    rules: [{ required: true, message: '请选择性别' }],
                    initialValue: data.sex,
                  },
                ]"
              >
                <a-radio-button value="01"> 男 </a-radio-button>
                <a-radio-button value="02"> 女 </a-radio-button>
              </a-radio-group>
            </a-form-item>
          </div>
          <a-form-item class="photo">
            <a-upload
              name="filecontent"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="/api/upload/img"
              :before-upload="beforeUpload"
              @change="handleChange"
              v-decorator="[
                'photo',
                {
                  rules: [{ required: true, message: '请上传个人照片' }],
                  initialValue: data.photo,
                },
              ]"
            >
              <img
                v-if="data.photo"
                :src="imageWebUrl + data.photo"
                style="width: 100px; height: 100px"
                alt="avatar"
              />
              <div v-else>
                <!-- <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                Upload
              </div> -->
                <img
                  style="width: 100px; height: 120px"
                  src="@/assets/image/resumeimg.jpg"
                  alt=""
                />
              </div>
            </a-upload>
            <p style="line-height: 1.4; text-align: center; font-size: 12px">
              支持JPG、GIF、<br />PNG格式
            </p>
          </a-form-item>
        </div>
        <a-form-item label="邮箱">
          <a-input
            style="width: 300px"
            size="large"
            placeholder="请输入邮箱"
            v-decorator="[
              'email',
              {
                rules: [{ required: true, message: '请输入邮箱' }],
                initialValue: data.email,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input
            style="width: 300px"
            size="large"
            placeholder="请输入手机号码"
            v-decorator="[
              'phone',
              {
                rules: [{ required: true, message: '请输入手机号码' }],
                initialValue: data.phone,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="出生年月">
          <a-date-picker
            style="width: 300px"
            size="large"
            :disabled="true"
            valueFormat="“YYYY-MM-DD”"
            placeholder="请选择出生年月"
            v-decorator="[
              'birthday',
              {
                rules: [{ required: true, message: '请选择出生年月' }],
                initialValue: data.birthday,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="现居住地">
          <a-cascader
            @change="onChange"
            :fieldNames="fieldNames"
            placeholder="请选择现居住地"
            style="width: 300px"
            size="large"
            :options="JSON.parse(JSON.stringify(formatData(cityList))) || []"
            v-decorator="[
              'location',
              {
                rules: [{ required: true, message: '请选择现居住地' }],
                initialValue: data.location,
              },
            ]"
          />
          <a-input
            style="width: 354px; margin-left: 16px"
            size="large"
            placeholder="请输入详细地址"
            v-decorator="[
              'address',
              {
                rules: [{ required: true, message: '请输入详细地址' }],
                initialValue: data.address,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="最高学历">
          <a-select
            style="width: 300px"
            size="large"
            placeholder="请选择最高学历"
            v-decorator="[
              'education',
              {
                rules: [{ required: true, message: '请选择最高学历' }],
                initialValue: data.education || undefined,
              },
            ]"
          >
            <a-select-option value="小学">小学</a-select-option>
            <a-select-option value="初中">初中</a-select-option>
            <a-select-option value="中专/高中">中专/高中</a-select-option>
            <a-select-option value="专科">专科</a-select-option>
            <a-select-option value="本科">本科</a-select-option>
            <a-select-option value="硕士研究生">硕士研究生</a-select-option>
            <a-select-option value="博士研究生">博士研究生</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="政治面貌">
          <a-select
            style="width: 300px"
            size="large"
            placeholder="请选择政治面貌"
            v-decorator="[
              'identity',
              {
                rules: [{ required: true, message: '请选择政治面貌' }],
                initialValue: data.identity || undefined,
              },
            ]"
          >
            <a-select-option value="中共党员">中共党员</a-select-option>
            <a-select-option value="民主党派">民主党派</a-select-option>
            <a-select-option value="无党派人士">无党派人士</a-select-option>
            <a-select-option value="团员">团员</a-select-option>
            <a-select-option value="群众">群众</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="残疾类别">
          <a-select
            style="width: 300px"
            size="large"
            placeholder="请选择残疾类别"
            v-decorator="[
              'DisabilityCategory',
              {
                rules: [{ required: true, message: '请选择残疾类别' }],
                initialValue: data.DisabilityCategory || undefined,
              },
            ]"
          >
            <a-select-option
              :value="item.code"
              v-for="(item, index) in JSON.parse(
                JSON.stringify(formatData(disTypeList))
              )"
              :key="index"
              >{{ item.name }}</a-select-option
            >
            <!-- <a-select-option value="智力残疾">智力残疾</a-select-option> -->
          </a-select>
          <!-- <a-cascader
            @change="onChange"
            change-on-select
            :fieldNames='disNames'
            placeholder="请选择残疾类别"
            style="width: 300px"
            size="large"
            :options="JSON.parse(JSON.stringify(formatData(disTypeList))) || []"
            v-decorator="['DisabilityCategory', {
              rules: [{ required: true, message: '请选择残疾类别' }],
              initialValue: DisabilityCategory
            }]"
          /> -->
        </a-form-item>
        <a-form-item label="残疾说明" class="fbi">
          <a-input
            style="width: 670px"
            size="large"
            placeholder="请输入残疾说明"
            v-decorator="[
              'DisabilityDescription',
              {
                rules: [{ required: false, message: '请输入残疾说明' }],
                initialValue: data.DisabilityDescription,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="工作年限">
          <a-select
            style="width: 300px"
            size="large"
            placeholder="请选择工作年限"
            v-decorator="[
              'workExper',
              {
                rules: [{ required: true, message: '请选择工作年限' }],
                initialValue: data.workExper || undefined,
              },
            ]"
          >
            <a-select-option value="一年以下">一年以下</a-select-option>
            <a-select-option value="1-3年">1-3年</a-select-option>
            <a-select-option value="3-5年">3-5年</a-select-option>
            <a-select-option value="5-10年">5-10年</a-select-option>
            <a-select-option value="10年以上">10年以上</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="求职状态">
          <a-select
            style="width: 300px"
            size="large"
            placeholder="请选择求职状态"
            v-decorator="[
              'JobStatus',
              {
                rules: [{ required: true, message: '请选择求职状态' }],
                initialValue: data.JobStatus || undefined,
              },
            ]"
          >
            <a-select-option value="离职-正在找工作"
              >离职-正在找工作</a-select-option
            >
            <a-select-option value="在职-正在找工作"
              >在职-正在找工作</a-select-option
            >
          </a-select>
        </a-form-item>
        <!-- 操作 -->
        <div class="operation">
          <div class="left">
            <a-button @click="status = false" size="large">取消</a-button>
            <a-button html-type="submit" size="large" type="primary"
              >保存</a-button
            >
          </div>
          <div class="right">
            <a v-if="showRemove" href="javascript:;" @click="onRemove()">
              <img src="@/assets/image/icon-remove.png" alt="icon" />
            </a>
          </div>
        </div>
      </a-form>
    </template>
    <!-- 详情状态 -->
    <template v-else>
      <div class="details">
        <div class="left">
          <!-- 头像 -->
          <img
            :src="
              data.photo && data.photo.fileList
                ? imageWebUrl + data.photo.fileList[0].response.data
                : imageWebUrl + data.photo
            "
            alt="个人头像"
          />
        </div>
        <div class="right">
          <h4>
            <!-- 姓名 -->
            <span>{{ data.name }}</span>
            <!-- 女孩 -->
            <img
              v-if="data.sex == '02'"
              src="@/assets/image/icon-girl.png"
              alt="icon"
            />
            <!-- 男孩 -->
            <img
              v-if="data.sex == '01'"
              src="@/assets/image/sexicon.png"
              alt="icon"
            />
          </h4>
          <div class="labels">
            <!-- 年龄 -->
            <div>
              <img src="@/assets/image/icon-age.png" alt="icon" />
              <span>{{ $fun.jsGetAge(data.birthday) }}</span>
            </div>
            <!-- 学历 -->
            <div>
              <img src="@/assets/image/icon-education.png" alt="icon" />
              <span>{{ data.education }}</span>
            </div>
            <!-- 工作年限 -->
            <div>
              <img src="@/assets/image/icon-WorkingYears.png" alt="icon" />
              <span>工作{{ data.workExper }}</span>
            </div>
            <!-- 所在地 -->
            <div>
              <img src="@/assets/image/icon-location.png" alt="icon" />
              <span>{{ data.residenAddress }}</span>
            </div>
            <!-- 身份 -->
            <div>
              <img src="@/assets/image/icon-identity.png" alt="icon" />
              <span>{{ data.identity }}</span>
            </div>
            <!-- 手机号 -->
            <div>
              <img src="@/assets/image/icon-phone.png" alt="icon" />
              <span>{{ $fun.FunDesensitization(data.phone, 4) }}</span>
            </div>
            <!-- 电子邮件 -->
            <div>
              <img src="@/assets/image/icon-email.png" alt="icon" />
              <span>{{ hideCode(data.email) }}</span>
            </div>
          </div>
          <ul>
            <li>
              <div class="label">残疾类别</div>
              <div class="content">{{ data.DisabilityCategory }}</div>
            </li>
            <li v-if="data.DisabilityDescription">
              <div class="label">残疾说明</div>
              <div class="content">{{ data.DisabilityDescription }}</div>
            </li>
            <li>
              <div class="label">求职状态</div>
              <div class="content">{{ data.JobStatus }}</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 编辑 -->
      <a
        v-if="showEdit"
        class="edit"
        href="javascript:;"
        @click="status = true"
      >
        <img src="@/assets/image/icon-edit.png" alt="icon" />
        <span>编辑</span>
      </a>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    // 是否显示编辑按钮
    showEdit: {
      type: Boolean,
      default: true,
    },
    // 是否显示删除按钮
    showRemove: {
      type: Boolean,
      default: true,
    },
    // 当前是否编辑状态
    EditStatus: {
      type: Boolean,
      default: false,
    },
    // 初始数据
    jsonData: {
      type: Object,
      default: () => {},
    },
    // 初始数据
    isfirst: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      form: this.$form.createForm(this, { name: "formData" }),
      data: {},
      status: null,
      cityList: [], // 城市-树形列表
      disTypeList: [], // 残疾类别-树形列表
      // 级联选择字段修改
      fieldNames: {
        label: "name",
        value: "code",
        children: "children",
      },
      disNames: {
        label: "name",
        value: "code",
        children: "childrens",
      },
    };
  },
  methods: {
    // 封装脱敏
    /**
     * 关键信息隐藏
     * @param str 字符串
     * @param 3 字符串前面保留位数
     * @param 3 字符串后面保留位数
     * @returns {string}
     */
    hideCode(email) {
      if (String(email).indexOf("@") > 0) {
        var str = email.split("@"),
          _s = "";
        if (str[0].length > 3) {
          for (let index = 0; index < str[0].length - 3; index++) {
            _s += "*";
          }
        }
        var new_email = str[0].substr(0, 3) + _s + "@" + str[1];
      }
      return new_email;
      // var len = str.length - 3 - 3;
      // var xing = "";
      // for (var i = 0; i < len; i++) {
      //   undefined;
      //   xing += "*";
      // }
      // return (
      //   str.substring(0, 1) + xing + str.substring(str.length - 3)
      // );
    },
    // 格式化数据，递归将空的children置为undefined
    formatData(data) {
      const that = this;
      data.forEach((element) => {
        if (element.children && element.children.length > 0) {
          that.formatData(element.children);
        } else {
          element.children = undefined;
        }
      });
      return data;
    },
    // 获取残疾类别-树形结构
    getdisTypeList() {
      this.$ajax({
        url: "/news/code/list/disab/tree",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.disTypeList = res.data;
        }
      });
    },
    // 获取城市-树形结构
    getCityList() {
      this.$ajax({
        url: "/news/provinceCity/list/tree",
      }).then((res) => {
        if (res.code == 200) {
          this.cityList = res.data;
        }
      });
    },
    // 选择级联
    onChange(e) {
      return e;
      console.log(e);
    },
    beforeUpload() {},
    handleChange(info) {
      // console.log(info);
      if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code == 200
      ) {
        this.$set(this.data, "photo", info.fileList[0].response.data);
        this.loading = false;
      } else if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code != 200
      ) {
        this.loading = false;
      } else {
        this.loading = true;
      }
      //
    },
    // 保存
    onSave(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit("save", values);
          this.status = false;
        }
      });
    },
    // 删除
    onRemove() {
      // this.$emit('remove', '触发了删除')
    },
  },
  mounted() {
    setTimeout(() => {}, 0);
  },
  created() {
    this.status = this.EditStatus;
    this.$set(this, "data", this.jsonData);
    this.getCityList();
    this.getdisTypeList();
  },
  watch: {
    jsonData(e) {
      this.$set(this, "data", e);
    },
  },
  computed: {
    DisabilityCategory() {
      for (const i in this.disTypeList) {
        if (this.disTypeList[i].name == this.data.DisabilityCategory) {
          return [this.disTypeList[i].code];
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-radio-button-wrapper {
  width: 110px;
  margin-right: 24px;
  box-sizing: border-box;
  // border-left: 1px solid #d9d9d9;
  border-radius: 2px;
  span {
    color: #cccccc;
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    width: 26px;
    text-align: center;
  }
}
/deep/.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #ffffff !important;
  height: 32px;
  background-repeat: no-repeat;
  background-image: url("~@/assets/image/sexback.png") !important;
  background-size: 100% 100% !important;
  span {
    color: #ffbe37 !important;
  }
}
/deep/.ant-radio-group-solid
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
  color: none;
  background: #ffffff;
}
.fbi /deep/label {
  padding-left: 10px;
}
.unit {
  padding: 32px;
  border: 1px solid #eee;
  position: relative;
  transition: all 0.3s;
  &.statu {
    background-color: #f8f8f8;
    border-color: #f8f8f8 !important;
  }
  &:hover {
    border-color: @theme;
    .edit {
      opacity: 1;
    }
  }
  // 表单
  .form {
    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 126px;
        label {
          font-size: 16px;
        }
      }
    }
    
  }
  // 操作
  .operation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    button {
      margin-right: 16px;
      width: 100px;
    }
    img {
      height: 18px;
    }
  }
  // 详情
  .details {
    display: flex;
    flex-direction: row;
    .left {
      margin-right: 32px;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
    .right {
      flex: 1;
      h4 {
        font-size: 24px;
        line-height: 33px;
        padding-bottom: 8px;
        img {
          margin-left: 8px;
          height: 16px;
        }
      }
      .labels {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        > div {
          margin-right: 32px;
          white-space: nowrap;
          padding-bottom: 16px;
          img {
            margin-right: 8px;
            height: 16px;
          }
        }
      }
      ul {
        li {
          display: flex;
          flex-direction: row;
          padding-bottom: 16px;
          &:last-child {
            padding: 0;
          }
          .label {
            color: #666;
            flex: none;
            line-height: 22px;
            &::after {
              content: "：";
            }
          }
          .content {
            color: #333;
            line-height: 22px;
          }
        }
      }
    }
  }
  // 编辑
  .edit {
    position: absolute;
    right: 16px;
    top: 16px;
    opacity: 0;
    transition: all 0.3s;
    img {
      height: 18px;
    }
    span {
      margin-left: 8px;
      color: #666;
      font-size: 13px;
    }
  }
}
.dlex2-div{
  height: 121px;
  .photo {
     position: relative;
     top: 48px; 
    }
}
</style>
